import React from 'react'
import { Modal, Button, Form, Input, Select, Row, Col, InputNumber, message, Card, DatePicker, Radio } from 'antd'
import { LwjArea }  from 'components'
import { validateMobile,validatorCharacters } from 'utils/utils';
import moment from 'moment'


const FormItem = Form.Item
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button
const FormModal = ({
  onOk,
  onCancel,
  item,
  user,
  form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
    getFieldValue,
    resetFields
  },
  dispatch,
  distributorItem,
  ...createModalProps
}) => {
  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 12, offset: 0},
      sm: {span: 12, offset: 0},
    },
  }

  const onSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        // 处理日期数据
        let _orderContractAt = values.orderContractAt.valueOf();
        let _installContractAt = values.installContractAt.valueOf();
        if (_orderContractAt > _installContractAt) {
          Modal.info({ title: '合同签订时间不能大于合同到货时间' });
          return;
        }
        let _temp = {
          orderContractAt: values.orderContractAt.format('YYYY-MM-DD'),
          installContractAt: values.installContractAt.format('YYYY-MM-DD'),
          contactName: values.contactName,
          contactPhone: values.contactPhone,
          consigneeRegion: values.consigneeRegion,
          consigneeRegionName: item.consigneeRegionName,
          consigneeProvince: values.consigneeRegion[0],
          consigneeCity: values.consigneeRegion[1],
          consigneeDistrict: values.consigneeRegion[2],
          consigneeAddress: values.consigneeAddress,
          consigneeName: values.consigneeName,
          consigneePhoneNum: values.consigneePhoneNum,
          customerName: values.customerName,
          customerPhoneNum: values.customerPhoneNum,
          contractType: values.contractType
        }
        onOk(_temp)
      }
    })
  }

  const modalOpts = {
    ...createModalProps,
    onCancel,
    onOk: onSubmit,
  }

  const onChange = (value,arr) => {
    item.consigneeRegionName = arr.map((value) => value.label).join("")
  }

  return (
    <Modal {...modalOpts}>
      <Form>
        <Row>
          <Col span={12}>
            <FormItem {...formItemLayout} label="合同签订时间">
              {getFieldDecorator('orderContractAt', {
                rules: [
                  {
                    required: true,
                    message: '请选择合同下单时间',
                    type: 'object',
                  },
                ],
                initialValue: item.orderContractAt ? moment(item.orderContractAt,'YYYY-MM-DD') : moment().startOf('day')
              })(
                <DatePicker style={{ width: '100%' }} />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="合同到货时间">
              {getFieldDecorator('installContractAt', {
                rules: [
                  {
                    required: true,
                    message: '请选择合同到货时间',
                    type: 'object',
                  },
                ],
                initialValue: item.installContractAt ? moment(item.installContractAt,'YYYY-MM-DD') : moment().startOf('day')
              })(
                <DatePicker style={{ width: '100%' }} />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="商家设计师姓名">
              {getFieldDecorator('contactName', {
                rules: [
                  {
                    required: true,
                    message: '请输入商家设计师姓名',
                    whitespace: true
                  }
                ],
                initialValue: item.contactName ? item.contactName : user.name
              })(<Input placeholder="请输入商家设计师姓名" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="商家设计师电话">
              {getFieldDecorator('contactPhone', {
                rules: [
                  {
                    required: true,
                    message: '请输入正确的商家设计师电话',
                    whitespace: true
                  }, {
                    validator: validateMobile
                  }
                ],
                initialValue: item.contactPhone ? item.contactPhone : user.mobile
              })(<Input placeholder="请输入商家设计师电话" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="合同类型">
              {getFieldDecorator('contractType', {
                rules: [
                  {
                    required: true,
                    message: '请选择合同单类型'
                  }
                ],
                initialValue: item.contractType
              })(
                <Radio.Group>
                  <RadioButton value="NORMAL">正常合同</RadioButton>
                  <RadioButton value="SAMPLE">样品合同</RadioButton>
                  <RadioButton value="SUPPLEMENT">增补合同</RadioButton>
                </Radio.Group>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label="收货人姓名">
              {getFieldDecorator('consigneeName', {
                rules: [
                  {
                    required: true,
                    message: '收货人姓名不能为空',
                    whitespace: true
                  },
                  {
                    max:5,
                    message: '收货人姓名长度不能大于5',
                    whitespace: true
                  }
                  ,{
                    validator:validatorCharacters
                  }
                ],
                initialValue: item.consigneeName
              })(<Input placeholder="请输入收货人姓名" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="收货人手机号">
              {getFieldDecorator('consigneePhoneNum', {
                rules: [
                  {
                    required: true,
                    message: '请输入正确的收货人手机号',
                    whitespace: true
                  }, {
                    validator: validateMobile
                  }
                ],
                initialValue: item.consigneePhoneNum
              })(<Input placeholder="请输入收货人手机号" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="收货人地址">
              {getFieldDecorator('consigneeRegion', {
                rules: [
                  {
                    required: true,
                    message: '请选择收货人地址',
                    type: 'array'
                  }
                ],
                initialValue: item.consigneeRegion
              })(
                < LwjArea width={'100%'} onChange={onChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="收货人详细地址">
              {getFieldDecorator('consigneeAddress', {
                rules: [
                  {
                    required: true,
                    message: '请输入收货人详细地址',
                    whitespace: true
                  }
                ],
                initialValue: item.consigneeAddress
              })(<Input placeholder="请输入收货人详细地址" />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default Form.create()(FormModal)
